
<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Text',
        remark: '单行文本输入框',
        extends: [form, input],
        deprecate: 'validate-default',
        attrs: [
          {
            name: 'clearable',
            type: 'Boolean',
            remark: '是否可以清空',
            option: '',
          },
        ],
        examples: [{
          remark: '必填且至少6个字符',
          type: 'html',
          view: true,
          type: 'html',
          code: `
            <template>
              <w-text name="user" :label="{text: '用户名'}" :required="true" :pattern="{value: /^\w{6,}$/, text: '至少6个字符'}"></w-text>
            </template>
            `
        }, {
          remark: '带搜索图标',
          type: 'html',
          view: true,
          type: 'html',
          code: `
            <template>
              <w-text name="user" :label="{text: '用户名'}" :required="true" :pattern="{value: /^\w{6,}$/, text: '至少6个字符'}">
                <template #append>
                  <i class="f-i f-i-search f-flex-center" style="width:30px"></i>
                </template>
              </w-text>
            </template>
            `
        }]
      }
    },
    created() {
      this.merge([{
          name: 'pattern',
          remark: 'JS正则表达式。正则或<var>{value,text}</var>',
          type: 'RegExp / Object',
          option: '<div><var>value</var>: RegExp</div><div><var>text</var>: 验证提示内容</div>',
        },{
          name: 'min-length',
          remark: '最小字节数。数字或<var>{value,text}</var>',
          type: 'Number / Object',
          option: '<div><var>value</var>: Number</div><div><var>text</var>: 验证提示内容</div>',
        },{
          name: 'max-length',
          remark: '最大字节数。数字或<var>{value,text}</var>',
          type: 'Number / Object',
          option: '<div><var>value</var>: Number</div><div><var>text</var>: 验证提示内容</div>',
        },], 'attrs')
    }
  }
</script>

<style>
</style>
